<template>
    <div class="course-list flex flex-col sm:flex-row dark:bg-regal-dark w-full">
        <div :class="'w-full ml-0 sm:ml-2 mt-2 sm:mt-0' ">
            <div class="table-default">
                <div class="pt-5 pl-2">
                    <el-button type="primary" @click="addTeacher"><Icon name="plus" className="w-4 h-4 mr-1" /> 添加老师</el-button>
                </div>
                <el-table
                    :data="tableData"
                    class="course-table mt-3"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        v-for="item in headerConfig"
                        :key="item.prop"
                        :prop="item.prop"
                        :label="item.label"
                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" @click="editTeacher(scope.row)">编辑</el-button>
                            <el-button type="text" @click="deleteTeacher(scope.row)">删除</el-button>
                            <el-button type="text" @click="changePassword(scope.row)">重置密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-dialog v-model="visible" :title="`${form.id? '编辑' : '添加'}老师`" destroy-on-close>
                <div class="edit-dialog">
                    <el-form :label-width="100" :rules="rules" ref="formRef" :model="form">
                        <el-form-item label="老师名" prop="name">
                            <el-input  v-model="form.name"  placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="负责学科" prop="subject" >
                            <el-cascader style="width: 100%" :options="subjectOption" :props="props" v-model="form.subject" clearable />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input  v-model="form.phone"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="visible = false">取消</el-button>
                        <el-button type="primary" @click="saveConfirm">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-dialog v-model="changePasswordVisible" title="重置密码" destroy-on-close>
                <div class="edit-dialog">
                    <el-form :label-width="100" :rules="passwordRules" ref="passwordFormRef" :model="passwordForm">
                        <el-form-item label="重置密码" prop="password">
                            <el-input  v-model="passwordForm.password"  placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="changePasswordVisible = false">取消</el-button>
                        <el-button type="primary" @click="reset">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import Http from '/admin/support/http'
const props = { multiple: true }
import type { FormInstance, FormRules } from 'element-plus'
import http from '/admin/support/http'
import { Code } from '/admin/enum/app'
import Message from '/admin/support/message'

const form = ref({
    id: '',
    name: '',
    subject_ids: '',
    phone: '',
    subject: [],
})
//获取学科列表
const subjectOption= ref([])
const formRef = ref(null)
// 表单验证
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 10, message: '请输入正确的姓名', trigger: 'blur' },
    ],
    subject: [
        { required: true, message: '选择科目', trigger: 'change' },
    ],
    phone: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        //手机号验证
        {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
        },
    ],
})
const changePasswordVisible = ref(false)
const passwordForm = reactive({
    password: '',
    id: '',
})
const passwordRules = reactive<FormRules>({
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '请输入6-12位密码', trigger: 'blur' },
    ],
})
const passwordFormRef = ref(null)


// 日历table 的头部配置
const headerConfig = [
    {
        prop: 'name',
        label: '老师名',
    },
    {
        prop: 'subjectName',
        label: '负责学科',
    },
    {
        prop: 'phone',
        label: '手机号',
    },
]
const tableData = ref([])
const visible = ref(false)
// 获取老师列表
const getTeacherList = async () => {
    const { data } = await Http.get('/teacher/list')
    if (data.code === Code.SUCCESS) {
        tableData.value = data.data.map((item: any) => {
            return {
                id: item.id,
                name: item.name,
                phone: item.phone,
                subjectName: item.grade_subject?.map((m: any) => {
                    return m.grade_name + '-' + m.subject_name
                }).join(','),
                subject: item.grade_subject?.map((m: any) => {
                    return [m.grade_id, m.subject_id]
                }),
            }
        })

    } else {
        Message.error(data.message)
    }
}

// 获取学科列表
const getSubjectList = async () => {
    http.get('/subject/list')
        .then(r => {
            if (r.data.code === Code.SUCCESS) {
                let data = r.data.data
                subjectOption.value = data

            } else {
                Message.error(r.data.message)
            }
        })
        .finally(() => {
        })

}

// 添加老师
const addTeacher = () => {
    visible.value = true
    form.value = {
        id: '',
        name: '',
        subject_ids: '',
        phone: '',
        subject: [],
    }
    getSubjectList()
    formRef.value.resetFields()
}

// 确认添加/编辑老师
const saveConfirm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const params = {
                name: form.value.name,
                subject_ids: form.value.subject.map((item: any) => item[1]).join(','),
                phone: form.value.phone,
            }
            if (form.value.id) {
                params.id = form.value.id
            }
            const { data } = await Http.post(params.id ? '/teacher/update' :'/teacher/add', params)
            if (data.code === Code.SUCCESS) {
                visible.value = false
                getTeacherList()
                Message.success('保存成功')
            } else {
                Message.error(data.message)
            }
        }
    })
}

// 编辑老师
const editTeacher = async (item) => {
    form.value.id = item.id
    form.value.name = item.name
    form.value.phone = item.phone
    form.value.subject = item.subject
    getSubjectList()
    visible.value = true
}

//删除老师
const deleteTeacher = (item) => {
    Message.confirm('确定删除老师吗？', async () => {
        const { data } = await Http.post('/teacher/delete', { id: item.id })
        if (data.code === Code.SUCCESS) {
            getTeacherList()
            Message.success('删除成功')
        } else {
            Message.error(data.message)
        }
    })
}

// 重置密码
const changePassword = (item) => {
    console.log(item, 'item')
    passwordForm.id = item.id
    changePasswordVisible.value = true
}
const reset = () => {
    passwordFormRef.value.validate(async (valid) => {
        if (valid) {
            const { data } = await Http.post('/teacher/reset', passwordForm)
            if (data.code === Code.SUCCESS) {
                changePasswordVisible.value = false
                Message.success('重置成功')
            } else {
                Message.error(data.message)
            }
        }
    })
}

getTeacherList()

</script>

<style scoped lang="scss">
.course-list {
    height: calc(100vh - 120px);
}
.table-default {
    height: calc(100% - 180px);
}
.course-table {
    background: #fff;
    .table {
        width: 100%;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        .course-header {
            height: 60px;
            td {
                text-align: center;
                border-right: 1px solid #ebeef5;
                border-bottom: 1px solid #e1e4e8;
            }
        }
        .course-tr {
            border-bottom: 1px solid #e1e4e8;

            .time {
                width: 100px;
                text-align: center;
                border-right: 1px solid #ebeef5;
            }
            .course-item {
                border-right: 1px solid #ebeef5;
                width: calc(100% / 7.6);
                height: 110px;
                padding: 4px;
                .active {
                    height: 100%;
                    color: #7C93C3;
                    background: #DFF5FF;
                    border-radius: 4px;
                    padding: 10px;
                }
            }
        }
    }
}
.edit-dialog {
    padding: 36px;
}
</style>
